<script setup lang="ts">
import { ActionSheetAction } from "../../../components";
import { ref, computed } from "vue";
import { Toast } from "../../../components/toast";

const showBasic = ref(false);
const showCancel = ref(false);
const showTitle = ref(false);
const showStatus = ref(false);
const showDescription = ref(false);

const simpleActions = computed<ActionSheetAction[]>(() => [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }]);

const statusActions = computed<ActionSheetAction[]>(() => [{ name: "着色选项", color: "#ee0a24" }, { name: "禁用选项", disabled: true }, { loading: true }]);

const actionsWithDescription = computed<ActionSheetAction[]>(() => [{ name: "选项一" }, { name: "选项二" }, { name: "选项三", subname: "描述信息" }]);

const onSelect = (item: ActionSheetAction) => {
  showBasic.value = false;
  Toast(item.name);
};

const onCancel = () => Toast("取消");
</script>

<template>
  <demo-block card title="基础用法">
    <vcu-cell is-link title="基础用法" @click="showBasic = true" />
    <vcu-cell is-link title="展示取消按钮" @click="showCancel = true" />
    <vcu-cell is-link title="展示描述信息" @click="showDescription = true" />
  </demo-block>

  <demo-block card title="选项状态">
    <vcu-cell is-link title="选项状态" @click="showStatus = true" />
  </demo-block>

  <demo-block card title="自定义面板">
    <vcu-cell is-link title="自定义面板" @click="showTitle = true" />
  </demo-block>

  <vcu-action-sheet v-model:show="showBasic" :actions="simpleActions" @select="onSelect" />

  <vcu-action-sheet v-model:show="showCancel" :actions="simpleActions" close-on-click-action cancel-text="取消" @cancel="onCancel" />

  <vcu-action-sheet v-model:show="showDescription" :actions="actionsWithDescription" close-on-click-action cancel-text="取消" description="这是一段描述信息" />

  <vcu-action-sheet v-model:show="showStatus" close-on-click-action :actions="statusActions" cancel-text="取消" />

  <vcu-action-sheet v-model:show="showTitle" title="标题">
    <div class="demo-action-sheet-content" style="padding: 30px 10px">内容</div>
  </vcu-action-sheet>
</template>
